<template>
  <view>
    <!-- 空白的购物车 -->
    <view class="empty_cart" v-if="isEmpty">
      <image src="/static/images/cart_empty@2x.png" />
      <view>哎呦，购物车是空的奥~~</view>
    </view>

    <!-- 非空的购物车 -->
    <view v-else class="cart-container">
      <!-- 标题 -->
      <van-cell title="购物车列表" icon="cart-circle-o" />

      <!-- 商品列表 -->
      <block v-for="(item, index) in cart" :key="index">
        <van-swipe-cell :right-width="65">
          <van-card :title="item.name">
            <!-- 右侧价格和数量插槽 -->
            <view slot="desc" class="desc">
              <text class="price">￥{{item.price}}</text>
              <van-stepper :value="item.count" @change="countChanged(item.id, $event)" />
            </view>

            <!-- 左侧复选框和图片插槽 -->
            <view slot="thumb" class="thumb">
              <van-checkbox
                @change="statusChanged(item.id, $event)"
                :value="item.isCheck"
                checked-color="#d81e06"
              ></van-checkbox>

              <image :src="item.pic" />
            </view>
          </van-card>
          <view slot="right" class="close" @click="deleteGoods(item.id)">删除</view>
        </van-swipe-cell>
      </block>
    </view>

    <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onClickButton" :tip="false">
      <van-checkbox
        class="fullCheck"
        :value="isFullChecked"
        checked-color="#d81e06"
        @change="changeAllStatus"
      >全选</van-checkbox>
    </van-submit-bar>
  </view>
</template>

<script>
import {
  updateGoodsCount,
  updateGoodsStatus,
  removeGoodsById,
  updateAllGoodsStatus
} from '../../common/cart.js'

export default {
  data() {
    return {
      cart: [] // 购物车的列表
    }
  },
  onLoad() {},
  onShow() {
    this.cart = getApp().globalData.cart
  },
  methods: {
    // 监听商品数量有没有发生改变
    countChanged(id, e) {
      // id 代表的是需要更新的商品 id
      // e.detail 是指步进器中更改以后的商品数量
      updateGoodsCount(id, e.detail)
    },

    // 监听复选框状态有没有发生改变
    statusChanged(id, e) {
      updateGoodsStatus(id, e.detail)
    },

    // 删除商品
    deleteGoods(id) {
      removeGoodsById(id)
    },

    // 更改所有状态的方法
    changeAllStatus(e) {
      updateAllGoodsStatus(e.detail)
    },

    // 提交订单
    onClickButton() {
      if(this.allPrice <= 0) {
        return uni.showToast({
          title: '订单金额不能小于 0',
          icon: 'none'
        })
      }

      uni.navigateTo({
        url: '/pages/order/order'
      })
    }
  },
  computed: {
    // 是否显示空白购物车
    isEmpty() {
      if (this.cart.length <= 0) {
        return true
      }

      return false
    },

    // 计算已勾选商品的价格
    allPrice() {
      let price = 0

      this.cart.forEach((item) => {
        if (item.isCheck) {
          price += item.price * item.count
        }
      })

      return price * 100
    },

    // 判断提交订单中的复选框是否是全选
    isFullChecked() {
      let cartLength = this.cart.length

      let count = 0
      this.cart.forEach((item) => {
        if (item.isCheck) {
          count++
        }
      })

      return cartLength === count
    }
  }
}
</script>

<style lang="less">
.empty_cart {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  padding-top: 200rpx;
  image {
    width: 180rpx;
    height: 180rpx;
  }

  view {
    margin-top: 20rpx;
  }
}

.cart-container {
  padding-bottom: 50px;
}

.desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  .price {
    color: red;
    font-weight: bold;
    font-size: 12px;
  }
}

.thumb {
  display: flex;
  align-items: center;
  width: 118px;
  image {
    width: 90px;
    height: 90px;
    margin-left: 8px;
  }
}

.van-card__thumb {
  width: 118px !important;
}

.close {
  background-color: #ff4444;
  width: 65px;
  height: 100%;
  color: white;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
